<template>
    <div>
        <div style="height: 510px;" ref="map1"></div>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue';
const map1 = ref(null);
//加载地图函数
const loadMap =()=>{
    AMapLoader.load({
            key: "a7669a1200c3b852d0f184dc1afc337b", //申请好的Web端开发者 Key，调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
            .then((AMap) => {
                const map = new AMap.Map(map1.value, {
                    pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
  viewMode: '3D', //地图模式
  rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
  pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
  zoom: 17, //初始化地图层级
  rotation: -15, //初始地图顺时针旋转的角度
  zooms: [2, 20], //地图显示的缩放级别范围
                    center: [103.826928, 36.056291], //地图中心点
                    mapStyle: "amap://styles/darkblue",
                });
                //给地图设置标记点
                const marker = new AMap.Marker({
                    position: [103.826928, 36.056291],
                    offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                    icon:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    title:"兰州站"
                });
                //给地图添加标记点
                map.add(marker);
                AMap.plugin("AMap.DistrictSearch", function () {
          let polygons = [];
          var opts = {
            subdistrict: 0, //获取边界不需要返回下级行政区
            extensions: "all", //返回行政区边界坐标组等具体信息
            level: "district", //查询行政级别为 市
          };
          let district = new AMap.DistrictSearch(opts);
          district.setExtensions("all");
          district.search("兰州市", function (status, result) {
            map.remove(polygons); //清除上次结果
            polygons = [];
            var bounds = result.districtList[0].boundaries;
            if (bounds) {
              for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                  strokeWeight: 5,
                  path: bounds[i],
                  fillOpacity: 0.4,
                  fillColor: "#80d8ff",
                  strokeColor: "#0091ea",
                });
                polygons.push(polygon);
              }
            }
            map.add(polygons);
            map.setFitView(polygons); //视口自适应
          });
        });

            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });
}
onMounted(()=>{
    loadMap();
})
</script>

<style lang="less">
    
</style>